<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>

<script lang="ts">
  import { defineComponent, PropType, Ref, ref, watchEffect } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import * as MathUtil from '/@/utils/MathUtil';

  const COLOR_BLUE = '#212A7C';
  const COLOR_RED = '#F53F3F';
  const COLOR_BACKGROUND = '#F7F5F4';

  export default defineComponent({
    name: 'IncomeProgress',
    props: {
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: '200px',
      },
      dataList: {
        type: Array as PropType<{ subjectName: string; actual: number; budget: number }[]>,
        required: true,
      },
    },
    setup(props) {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);

      const getOption = () => {
        return {
          grid: {
            top: '1%',
            left: '2%',
            right: '2%',
            bottom: '5%',
            containLabel: true,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
            formatter: (params: any) => {
              const value = params[0].value;
              return `${params[0].name}: ${MathUtil.percent2DFormatter(value, 1)}`;
            },
          },
          xAxis: {
            type: 'value',
            max: 1.2,
            axisLabel: {
              formatter: (value: number) => {
                return `${value * 100}%`;
              },
              align: 'right',
            },
            splitLine: {
              show: false,
            },
            axisLine: { show: true },
            axisTick: { show: true },
          },
          yAxis: {
            type: 'category',
            data: props.dataList.map((item) => item.subjectName),
            axisLine: { show: true },
            axisTick: { show: false },
          },
          series: [
            {
              type: 'bar',
              barWidth: 20,
              itemStyle: {
                borderRadius: [0, 10, 10, 0],
              },
              showBackground: true,
              backgroundStyle: {
                color: COLOR_BACKGROUND,
              },
              data: props.dataList.map((item) => ({
                value: MathUtil.safeDivide(item.actual, item.budget),
                itemStyle: {
                  color: item.subjectName === '总收入' ? COLOR_RED : COLOR_BLUE,
                },
              })),
              label: {
                show: true,
                position: 'right',
                formatter: (params: any) => {
                  return `${MathUtil.percent2DFormatter(params.value, 0)}`;
                },
              },
            },
          ],
        };
      };

      watchEffect(() => {
        if (props.dataList.length > 0) {
          setOptions(getOption());
        }
      });

      return { chartRef };
    },
  });
</script>

<style lang="less" scoped>
  .echarts {
    width: 100% !important;
    height: 100% !important;
  }
</style>
